<template>
  <div>
    <!--  分类条件  -->
    <el-dialog
      v-dialogDrag
      :title="title"
      model
      :visible.sync="isClassifyDialog"
      :close-on-click-modal="false"
      width="60%"
      center
      top="5vh"
      :before-close="confirmFal"
    >
      <div style="margin-bottom: 5px;">
        <el-button size="mini" @click="newly(1)">{{ $t('btn.newHang') }}<!--新增行--></el-button>
        <el-button size="mini" @click="newly(2)">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        <el-button size="mini" @click="clasifyData=[]">{{ $t('market.allDel') }}<!--全部删除--></el-button>
      </div>
      <div>
        <jc-table
          :table-data="clasifyData"
          :table-header="tableHeader"
          table-height="500px"
          serial
          @rowClick="rowClick"
        >
          <el-table-column label="(" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.khfhLeft" filterable size="mini">
                <el-option v-for="item in khfhLeftData" :key="item.code" :label="item.desc" :value="item.code" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.field')" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.viewField" filterable size="mini">
                <el-option v-for="item in viewFieData" :key="item.fentryId" :label="item.fname" :value="item.fname" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.compare')" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.bjfh" filterable size="mini">
                <el-option v-for="item in bjfhData" :key="item.code" :label="item.desc" :value="item.code" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.value')" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.viewValue" size="mini" />
            </template>
          </el-table-column>
          <el-table-column label=")" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.khfhRight" filterable size="mini">
                <el-option v-for="item in khfhRightData" :key="item.code" :label="item.desc" :value="item.code" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.logic')" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.ljfh" filterable size="mini">
                <el-option v-for="item in ljfhData" :key="item.code" :label="item.desc" :value="item.code" />
              </el-select>
            </template>
          </el-table-column>
        </jc-table>
      </div>
      <div style="margin-top: 5px;">{{ $t('market.accountFor') }}<!--业务分类条件说明-->：<el-input ref="fdesction" v-model="fdesction" size="mini" style="width: 200px;" /></div>
      <span slot="footer">
        <el-button @click="confirmFal">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="confirmConfig">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vouMix from '@/views/financial/voucherTemplate/components/mixins'

export default {
  mixins: [vouMix],
  props: {
    title: {
      type: String,
      default: '条件设置'
    },
    msg: { // 分类數組
      type: Array,
      default: function() {
        return []
      }
    },
    fdesction: { // 业务分类条件说明
      type: String,
      default: ''
    },
    ftempId: { // 来源单据id
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableHeader: [],
      isClassifyDialog: true, // 分类条件
      clasifyData: [{
        khfhLeft: '',
        viewField: '',
        bjfh: 1,
        viewValue: '',
        khfhRight: '',
        ljfh: ''
      }],
      indexSelf: 0
    }
  },
  watch: {
    msg: {
      handler(val) {
        if (val.length > 0) this.clasifyData = val
      },
      immediate: true
    }
  },
  methods: {
    // 确认
    confirmConfig() {
      if (!this.fdesction) {
        this.$refs.fdesction.focus()
        this.$message('分类条件不能为空')
        return
      }
      this.$emit('classify', this.fdesction, this.clasifyData)
    },
    // 取消
    confirmFal() {
      this.$emit('classify')
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 新增/删除行
    newly(ev) {
      const DATA = {
        khfhLeft: '',
        viewField: '',
        bjfh: 1,
        viewValue: '',
        khfhRight: '',
        ljfh: ''
      }
      if (ev === 1) {
        this.clasifyData.push(DATA)
      } else {
        this.clasifyData.splice(this.indexSelf, 1)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
